<template>
  <view class="payment-settings-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">支付设置</view>
      <view class="header-subtitle">支付方式、自动缴费</view>
    </view>

    <!-- 支付方式管理 -->
    <view class="payment-methods">
      <view class="section-title">
        <text class="title-text">支付方式</text>
        <text class="add-method" @click="addPaymentMethod">添加</text>
      </view>
      
      <view class="method-list">
        <view 
          v-for="method in paymentMethods" 
          :key="method.id" 
          class="method-item"
          @click="editPaymentMethod(method)"
        >
          <view class="method-icon" :style="{ background: method.color }">
            <u-icon :name="method.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="method-info">
            <view class="method-header">
              <text class="method-name">{{ method.name }}</text>
              <text class="method-status">{{ method.status }}</text>
            </view>
            <view class="method-details">
              <text class="method-number">{{ method.maskedNumber }}</text>
              <text class="method-type">{{ method.type }}</text>
            </view>
          </view>
          <view class="method-actions">
            <u-switch 
              v-model="method.enabled" 
              @change="toggleMethod(method)"
            ></u-switch>
          </view>
        </view>
      </view>
    </view>

    <!-- 自动缴费设置 -->
    <view class="auto-payment">
      <view class="section-title">
        <text class="title-text">自动缴费</text>
      </view>
      
      <view class="auto-list">
        <view 
          v-for="item in autoPaymentItems" 
          :key="item.id" 
          class="auto-item"
        >
          <view class="auto-icon" :style="{ background: item.iconColor }">
            <u-icon :name="item.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="auto-info">
            <view class="auto-header">
              <text class="auto-title">{{ item.title }}</text>
              <text class="auto-amount">¥{{ item.amount.toFixed(2) }}</text>
            </view>
            <view class="auto-details">
              <text class="auto-type">{{ item.type }}</text>
              <text class="auto-date">{{ item.nextDate }}</text>
            </view>
          </view>
          <view class="auto-actions">
            <u-switch 
              v-model="item.enabled" 
              @change="toggleAutoPayment(item)"
            ></u-switch>
          </view>
        </view>
      </view>
    </view>

    <!-- 安全设置 -->
    <view class="security-settings">
      <view class="section-title">
        <text class="title-text">安全设置</text>
      </view>
      
      <view class="security-list">
        <view 
          v-for="setting in securitySettings" 
          :key="setting.id" 
          class="security-item"
          @click="goToSecuritySetting(setting)"
        >
          <view class="security-icon" :style="{ background: setting.iconColor }">
            <u-icon :name="setting.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="security-info">
            <view class="security-header">
              <text class="security-title">{{ setting.title }}</text>
              <text class="security-status">{{ setting.status }}</text>
            </view>
            <view class="security-details">
              <text class="security-desc">{{ setting.description }}</text>
            </view>
          </view>
          <view class="security-action">
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 通知设置 -->
    <view class="notification-settings">
      <view class="section-title">
        <text class="title-text">通知设置</text>
      </view>
      
      <view class="notification-list">
        <view 
          v-for="notification in notificationSettings" 
          :key="notification.id" 
          class="notification-item"
        >
          <view class="notification-icon" :style="{ background: notification.iconColor }">
            <u-icon :name="notification.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="notification-info">
            <view class="notification-header">
              <text class="notification-title">{{ notification.title }}</text>
            </view>
            <view class="notification-details">
              <text class="notification-desc">{{ notification.description }}</text>
            </view>
          </view>
          <view class="notification-actions">
            <u-switch 
              v-model="notification.enabled" 
              @change="toggleNotification(notification)"
            ></u-switch>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 支付设置页面
 * @author Wu.Liang
 * @date 2025-01-21
 * @description 支付设置功能页面，包含支付方式、自动缴费、安全设置等
 */

import { ref, reactive, onMounted } from 'vue'

// 支付方式
const paymentMethods = ref([
  {
    id: 1,
    name: '微信支付',
    icon: 'wechat',
    color: '#07c160',
    type: '第三方支付',
    maskedNumber: '**** **** **** 1234',
    status: '已绑定',
    enabled: true
  },
  {
    id: 2,
    name: '支付宝',
    icon: 'alipay',
    color: '#1677ff',
    type: '第三方支付',
    maskedNumber: '**** **** **** 5678',
    status: '已绑定',
    enabled: true
  },
  {
    id: 3,
    name: '工商银行',
    icon: 'credit-card',
    color: '#ff6b35',
    type: '储蓄卡',
    maskedNumber: '**** **** **** 9012',
    status: '已绑定',
    enabled: false
  }
])

// 自动缴费设置
const autoPaymentItems = ref([
  {
    id: 1,
    title: '物业费自动缴费',
    amount: 150.00,
    type: '物业费',
    nextDate: '2025-02-01',
    icon: 'home',
    iconColor: '#3742fa',
    enabled: true
  },
  {
    id: 2,
    title: '停车费自动缴费',
    amount: 80.00,
    type: '停车费',
    nextDate: '2025-02-01',
    icon: 'car',
    iconColor: '#2ed573',
    enabled: false
  },
  {
    id: 3,
    title: '水电费自动缴费',
    amount: 120.00,
    type: '水电费',
    nextDate: '2025-02-01',
    icon: 'flash',
    iconColor: '#ff9500',
    enabled: true
  }
])

// 安全设置
const securitySettings = ref([
  {
    id: 1,
    title: '支付密码',
    description: '设置6位数字支付密码',
    status: '已设置',
    icon: 'lock',
    iconColor: '#e74c3c'
  },
  {
    id: 2,
    title: '指纹支付',
    description: '使用指纹快速支付',
    status: '已开启',
    icon: 'fingerprint',
    iconColor: '#9b59b6'
  },
  {
    id: 3,
    title: '面容支付',
    description: '使用面容识别支付',
    status: '未开启',
    icon: 'camera',
    iconColor: '#3498db'
  }
])

// 通知设置
const notificationSettings = ref([
  {
    id: 1,
    title: '缴费提醒',
    description: '费用到期前3天提醒',
    icon: 'bell',
    iconColor: '#f39c12',
    enabled: true
  },
  {
    id: 2,
    title: '支付成功通知',
    description: '支付成功后立即通知',
    icon: 'check-circle',
    iconColor: '#27ae60',
    enabled: true
  },
  {
    id: 3,
    title: '异常交易提醒',
    description: '检测到异常交易时提醒',
    icon: 'exclamation-triangle',
    iconColor: '#e74c3c',
    enabled: false
  }
])

// 页面跳转方法
const addPaymentMethod = () => {
  uni.navigateTo({
    url: '/pages/payment/add-method'
  })
}

const editPaymentMethod = (method) => {
  uni.navigateTo({
    url: `/pages/payment/edit-method?id=${method.id}`
  })
}

const toggleMethod = (method) => {
  uni.showToast({
    title: `${method.enabled ? '启用' : '禁用'}${method.name}`,
    icon: 'none'
  })
}

const toggleAutoPayment = (item) => {
  uni.showToast({
    title: `${item.enabled ? '开启' : '关闭'}${item.title}`,
    icon: 'none'
  })
}

const goToSecuritySetting = (setting) => {
  uni.navigateTo({
    url: `/pages/payment/security-setting?id=${setting.id}`
  })
}

const toggleNotification = (notification) => {
  uni.showToast({
    title: `${notification.enabled ? '开启' : '关闭'}${notification.title}`,
    icon: 'none'
  })
}

// 页面加载
onMounted(() => {
  loadPaymentSettings()
})

// 数据加载方法
const loadPaymentSettings = async () => {
  try {
    console.log('加载支付设置数据')
  } catch (error) {
    console.error('加载支付设置数据失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.payment-settings-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

.page-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px 0;
  
  .header-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
  }
  
  .header-subtitle {
    font-size: 14px;
    color: #666;
  }
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
  
  .title-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  
  .add-method {
    font-size: 14px;
    color: #2d8cf0;
    cursor: pointer;
  }
}

.payment-methods,
.auto-payment,
.security-settings,
.notification-settings {
  margin-bottom: 24px;
}

.method-list,
.auto-list,
.security-list,
.notification-list {
  .method-item,
  .auto-item,
  .security-item,
  .notification-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .method-icon,
    .auto-icon,
    .security-icon,
    .notification-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .method-info,
    .auto-info,
    .security-info,
    .notification-info {
      flex: 1;
      min-width: 0;
      
      .method-header,
      .auto-header,
      .security-header,
      .notification-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .method-name,
        .auto-title,
        .security-title,
        .notification-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        
        .method-status,
        .auto-amount,
        .security-status {
          font-size: 14px;
          color: #666;
        }
      }
      
      .method-details,
      .auto-details,
      .security-details,
      .notification-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .method-number,
        .method-type,
        .auto-type,
        .auto-date,
        .security-desc,
        .notification-desc {
          font-size: 12px;
          color: #666;
        }
      }
    }
    
    .method-actions,
    .auto-actions,
    .security-action,
    .notification-actions {
      margin-left: 16px;
    }
  }
}
</style>
